<template>
	<view class="content">
		<view class="user">
			<view class="avatar">
				<image src="/static/icon/avatar.png" mode="aspectFill"></image>
			</view>
			<view class="right-box">
				<view class="phone">
					<view class="phone-number">15311548</view>
					<view class="right-one">
						<image src="/static/icon/right-two.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="vip">订阅会员</view>
			</view>
		</view>
		<view class="bind-phone">
			<view class="bind-phone-title">绑定手机号</view>
			<view class="bind-phone-tip">绑定手机号后，可支持数据多平台同步</view>
			<view class="bind-phone-btn">立即绑定</view>
		</view>
		<view class="more">
			<view class="more-item">
				<view class="more-title">攒金总天数</view>
				<view class="more-number">120天</view>
			</view>
			<view class="more-item">
				<view class="more-title">攒金总克数</view>
				<view class="more-number">98.01克</view>
			</view>
			<view class="more-item">
				<view class="more-title">记账总天数</view>
				<view class="more-number">120天</view>
			</view>
		</view>
		<view class="option">
			<view class="option-item common" v-for="(item, index) in optionList" :key="index">
				<view class="option-left">
					<view class="option-icon">
						<image :src="item.icon" mode="aspectFill"></image>
					</view>
					<view class="option-name">{{ item.name }}</view>
				</view>
				<view class="option-right">
					<view class="option-tip" v-if="item.tip">{{ item.tip }}</view>
					<view class="option-r">
						<image src="/static/icon/right-two.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const optionList = ref([{
			name: '攒金设置',
			path: '',
			icon: '/static/icon/money-setting.png',
			type: 1,
			tip: ''
		},
		{
			name: '记账设置',
			path: '',
			icon: '/static/icon/chargeup.png',
			type: 2,
			tip: '已开启记账'
		},
		{
			name: '工具箱',
			path: '',
			icon: '/static/icon/tool.png',
			type: 3,
			tip: ''
		},
		{
			name: '客服',
			path: '',
			icon: '/static/icon/concat.png',
			type: 4,
			tip: '任何问题都可以找客服'
		},
		{
			name: '声明',
			path: '',
			icon: '/static/icon/statement.png',
			type: 5,
			tip: ''
		},
		{
			name: '当前版本',
			path: '',
			icon: '/static/icon/version.png',
			type: 6,
			tip: ''
		}
	]);
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 32rpx;
	}

	.common {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 32rpx;
	}

	.user {
		margin-top: 176rpx;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		.avatar {
			margin-right: 10rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}

		.right-box {
			.phone {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.phone-number {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 36rpx;
					color: #292522;
				}

				.right-one {
					image {
						width: 20rpx;
						height: 28rpx;
					}
				}
			}

			.vip {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100rpx;
				height: 36rpx;
				background: #1b1b1d;
				border-radius: 20rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 20rpx;
				color: #f1c121;
			}
		}
	}

	.bind-phone {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx 56rpx;
		margin-bottom: 16rpx;

		.bind-phone-title {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
		}

		.bind-phone-tip {
			margin: 16rpx 0 32rpx 0;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
		}

		.bind-phone-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 560rpx;
			height: 100rpx;
			background: #feda44;
			border-radius: 32rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
		}
	}

	.more {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx 80rpx;
		margin-bottom: 16rpx;

		.more-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.more-title {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 24rpx;
				color: #292522;
				margin-bottom: 16rpx;
			}

			.more-number {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 36rpx;
				color: #292522;
			}
		}
	}

	.option {
		padding-bottom: 32rpx;

		.option-item:last-child {
			margin-bottom: 0;
		}

		.option-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;

			.option-left {
				display: flex;
				align-items: center;

				.option-icon {
					margin-right: 16rpx;
					width: 40rpx;
					height: 40rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.option-name {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #292522;
				}
			}

			.option-right {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.option-tip {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 24rpx;
					color: #888481;
				}

				.option-r {
					image {
						width: 20rpx;
						height: 28rpx;
					}
				}
			}
		}
	}
</style>

<style>
	page {
		background-color: #f8db61;
	}
</style>